<!--党建测评编辑页面-->
<template>
  <div class="editThePage" @click="closeThePage" v-loading.fullscreen.lock="loading" element-loading-text="正在保存中...">
    <div class="editThePage-head" data-blank="blankPage">
      <div class="head-logo"><img src="@/assets/images/logo.png" alt="logo" />党建测评</div>
      <div class="head-right">
        <div class="right-preservation" @click="calibration">
          <el-icon><Search /></el-icon>
          <span>校验必填项</span>
        </div>
        <div class="right-preservation" @click="preservation">
          <el-icon><DocumentAdd /></el-icon>
          <span>保存</span>
        </div>
        <div class="right-preservation" @click="allots">
          <el-icon><Promotion /></el-icon>
          <span>下发</span>
        </div>
        <div class="right-dropDownOptions">
          <div class="dropDownOptions-btn">
            <el-icon><View /></el-icon><span>预览</span>
          </div>
          <div class="dropDownOptions-options">
            <div class="options-content">
              <div class="content-preview" @click="newPreviewThePage('preview')">
                <img src="@/assets/images/pc.png" alt="电脑" />
                PC
              </div>
              <div class="content-preview" @click="newPreviewThePage('previewMoa')">
                <img src="@/assets/images/moa.png" alt="手机" />
                MOA
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="editThePage-body">
      <!--配置区域-->
      <menuPage></menuPage>
      <!--预览区域-->
      <previewThePage :deliveryStatus="EDIT_STATUS" :terminalType="DESKTOP"></previewThePage>
      <!--设置区域-->
      <configureThePage :key="templatePageIndex"></configureThePage>
    </div>
  </div>
  <!--下发弹窗-->
  <allotsPopUp v-model:dialogVisible="dialogVisible" />
</template>

<script setup>
import {
  ERROR_MESSAGE,
  DEFAULT_TAG_TITLE,
  PROCESS_TYPE,
  DEVICE_TYPE,
  BEAUTIFUL_MOBILE_NAME,
} from "@/utils/mockConfiguration/mockConfig";
document.title = DEFAULT_TAG_TITLE;
import { tipsMessage } from "@/utils/messageConfig";
import useSubmitTheVerification from "@/utils/previewTheConfiguration";
import allotsPopUp from "@/components/popUpWidget/allotsPopUp.vue";
import { DocumentAdd, Promotion, View } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import useEditThePage from "@/utils/editTheConfiguration/index";
const { templatesAreCopiedAndAdded } = useEditThePage(); //菜单点击添加模块
import menuPage from "@/views/party/edit/menuPage.vue"; //菜单页面
import previewThePage from "@/components/TemplatePreviewComponent/previewThePage.vue";
import configureThePage from "@/views/party/edit/configureThePage.vue"; //配置页面
import { setTemplate } from "@/api/partyBuilding";
import useInitializationMethod from "@/utils/initializationMethod";
import { useTemplateEditing } from "@/store/modules/templateEditing";

const { DESKTOP } = DEVICE_TYPE;
const { EDIT_STATUS } = PROCESS_TYPE;
const dialogVisible = ref(false); //下发弹窗状态
const { init } = useInitializationMethod(); //初始化方法、必填题规则、选填题规则、禁答题规则
const route = useRoute();
const router = useRouter();
const { calibration } = useSubmitTheVerification(); //提交规则校验
const templateEditing = useTemplateEditing();
const { currentSettings, templatePageIndex, templateSettings, menuButton } = storeToRefs(templateEditing);
const { ERROR_OA_NOT_FILLED } = ERROR_MESSAGE;
/**
 * 下发
 */
const allots = async () => {
  await preservation();
  if (calibration()) {
    dialogVisible.value = true;
  }
};

/**
 * 预览页面
 * @param name 预览页面名称
 */
const newPreviewThePage = async name => {
  const id = await preservation();
  if (!id) {
    return;
  }
  const routeUrl = router.resolve({
    name,
    query: { terminal: name, id },
  });
  window.open(routeUrl.href, "_blank");
};
const loading = ref(false); //保存loading

/**
 * 校验最美移动人员工OA是否填写
 * @param array
 */
const calibrationUserId = array => array.every(item => item?.id);

/**
 * 保存模板
 */
const preservation = async () => {
  const { baseConfig, groupConfig, modules, id, ...rest } = currentSettings.value;
  const basicConfigurationData = modules.filter(item => item.moduleId === BEAUTIFUL_MOBILE_NAME);
  if (!calibrationUserId(basicConfigurationData)) {
    tipsMessage({ type: "error", message: ERROR_OA_NOT_FILLED });
    return false;
  }
  // 样式数据和业务数据转换
  const newModules = modules.map(item => {
    return {
      ...item,
      cssStyle: JSON.stringify(item.cssStyle),
      businessData: JSON.stringify(item.businessData),
    };
  });
  const templateData = {
    ...rest,
    id: route.query.id ?? "",
    baseConfig: JSON.stringify(baseConfig),
    groupConfig: JSON.stringify(groupConfig),
    modules: JSON.stringify(newModules),
  };
  try {
    loading.value = true;
    const { data } = await setTemplate(JSON.stringify(templateData));
    ElMessage.success("保存成功");
    loading.value = false;
    currentSettings.value.id = data;
    templatesAreCopiedAndAdded({ moduleId: "basicConfiguration" });
    await init({ deliveryStatus: "edit", terminalType: "pc" });
    router.push({
      name: "edit",
      query: { id: data }, // 添加 id 参数
    });
    return data;
  } catch (e) {
    // 框架统一对异常做处理 这里无需重复错误提示
  }
};
/**
 * 点击空白处取消模板模块选择，默认基础配置
 */
const { baseConfig } = currentSettings.value;
const closeThePage = $event => {
  const basicConfiguration = $event.target.getAttribute("data-blank");
  // 点击空白处取消模板模块选择，默认基础配置
  if (basicConfiguration !== "blankPage") {
    return;
  }
  menuButton.value = "basicConfiguration";
  templateSettings.value = baseConfig;
  templatePageIndex.value = null;
};
</script>

<style scoped lang="less">
.editThePage {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
  .editThePage-head {
    background: @buttonColor;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 44px;
    .head-logo {
      display: flex;
      align-items: center;
      font-size: 27px;
      color: #ffffff;
      text-align: center;
      font-weight: 700;
      img {
        width: 27px;
        margin-right: 4.5px;
      }
    }
    .head-right {
      display: flex;
      column-gap: 10px;
      .right-preservation {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 8px;
        font-size: 18px;
        color: #ffffff;
        font-weight: 700;
        padding: 10px;
        border: 2px solid #ffffff;
        border-radius: 6px;
        cursor: pointer;
      }
      .right-dropDownOptions {
        display: flex;
        flex-direction: column;
        color: #ffffff;
        position: relative;
        .dropDownOptions-btn {
          padding: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #ffffff;
          column-gap: 8px;
          font-weight: 700;
          border-radius: 6px;
          cursor: pointer;
          border: 2px solid #ffffff;
        }
        &:hover {
          .dropDownOptions-options {
            display: flex;
          }
        }
        .dropDownOptions-options {
          display: none;
          position: absolute;
          top: 100%;
          transform: translateX(-25%);
          z-index: 10;
          .options-content {
            margin-top: 20px;
            border: 1px solid @buttonColor;
            height: auto;
            width: 156px;
            position: relative;
            color: @buttonColor;
            font-size: 20px;
            background-color: #fff;
            display: flex;
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 0 10rem 0 #d2dded;
            &::before {
              content: "";
              position: absolute;
              top: -18px; /* 三角形的高度 */
              left: 50%;
              transform: translateX(-50%);
              border-width: 0 18px 18px 18px; /* 上边框为0，左右和下边框为20px */
              border-style: solid;
              border-color: transparent transparent @buttonColor transparent; /* 上边框透明，下边框为红色 */
              width: 0;
              height: 0;
            }
            &::after {
              content: "";
              position: absolute;
              top: -16px; /* 三角形的高度减去2px */
              left: 50%;
              transform: translateX(-50%);
              border-width: 0 16px 16px 16px; /* 上边框为0，左右和下边框为18px */
              border-style: solid;
              border-color: transparent transparent #fff transparent; /* 上边框透明，下边框为白色 */
              width: 0;
              height: 0;
            }
            .content-preview {
              display: flex;
              flex-direction: column;
              align-items: center;
              column-gap: 10px;
              row-gap: 5px;
              cursor: pointer;
              img {
                width: 40%;
              }
            }
          }
        }
      }
    }
  }
  .editThePage-body {
    width: 100%;
    height: calc(100vh - 70px);
    display: flex;
    justify-content: space-between;
    position: relative;
    //切换箭头样式
    :deep(.body-left),
    :deep(.body-right) {
      .arrow {
        width: 28px;
        height: 56px;
        position: absolute;
        top: 34.5%;
        right: -28px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .icon {
          color: @buttonColor;
          font-size: 24px;
        }
      }
      &.body-left .arrow {
        right: -28px;
        border-radius: 0 12px 12px 0;
      }
      &.body-right .arrow {
        left: -28px;
        border-radius: 12px 0 0 12px;
      }
    }
  }
}
</style>
